<template>
	<!-- 
	 customShowModal.visible：显隐
	 customShowModal.title：标题
	 customShowModal.content：内容
	 customShowModal.cancelText：取消按钮文案
	 customShowModal.confirmText：确定按钮文案
	 -->
	<view class="modal" v-if="customShowModal.visible">
		<view class="modal-content">
			<view class="modal-header ff-font-17">
				<text>{{ customShowModal.title }}</text>
			</view>
			<view class="modal-body ff-line-height-1-4">
				<text class="ff-line-height-1-4">{{ customShowModal.content }}</text>
				<text v-if="customShowModal.content1"
					class="ff-line-height-1-4 ff-color-red">{{ customShowModal.content1 }}</text>
			</view>
			<view class="modal-footer ff-font-17">
				<view class="button_view cancel-btn " v-if="customShowModal.showCancel" @click="cancel">
					{{ customShowModal.cancelText || '取消' }}
				</view>
				<view class="button_view confirm-btn" :class="[ numTime > 0 ? 'active' : '' ]" @click="confirm">
					{{ customShowModal.confirmText || `好的` }}{{ numTime > 0 ? `（${numTime}）` : '' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['customShowModal'],
		data() {
			return {
				numTime: 0 // 倒计时
			}
		},
		watch: {
			customShowModal: {
				handler(newVal) {
					if (newVal.messageType == 2) {
						this.numTime = 3
						let timeNum = setInterval(() => {
							if (this.numTime == 0) {
								clearInterval(timeNum)
							} else {
								this.numTime--
							}
						}, 1000)
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 点击关闭按钮
			cancel() {},
			// 点击确定按钮
			confirm() {
				if (this.numTime < 1) {
					this.$emit('setVisible')
				}
			}
		}
	}
</script>

<style scoped>
	.active {
		color: #a7a1a1 !important;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		font-size: 32rpx;
	}

	.modal-content {
		width: 81%;
		background-color: #ffffff;
		border-radius: 25rpx;
		overflow: hidden;
	}

	.modal-header {
		padding: 75rpx 30rpx 20rpx;
		font-weight: bold;
		text-align: center;
		color: #000000;
		font-weight: 600;
	}

	.modal-body {
		padding: 20rpx 50rpx 65rpx;
		text-align: center;
		color: #7F7F7F;
	}

	.modal-footer {
		display: flex;
		justify-content: center;
		border-top: 2rpx solid #F5F5F5;
	}

	.button_view {
		flex: 1;
		padding: 40rpx 0;
		border: none;
		outline: none;
		width: 50%;
		background: #ffffff;
		text-align: center
	}

	.cancel-btn {
		color: #000000;
		border-right: 2rpx solid #e5e5e5;
		font-weight: 600;
	}

	.confirm-btn {
		color: #3178FF;
		font-weight: 600;
	}
</style>